<template>
  <el-form
    ref="form"
    :rules="rules"
    :model="model"
    label-position="right"
    :label-width="labelWidth"
    class="mini-form"
    size="mini"
  >
    <slot />
  </el-form>
</template>

<script>

export default {
  name: 'YqForm',
  props: {
    rules: {
      type: Object,
      default: undefined
    },
    model: {
      type: Object,
      default: undefined
    },
    labelWidth: {
      type: String,
      default: '80px'
    }
  },
  mounted() {
    this.nextCell()
  },
  methods: {
    validate(callback) {
      this.$refs.form.validate(callback)
    },
    clearValidate() {
      this.$refs.form.clearValidate()
    },
    nextCell(type) {
      // 子组件全部渲染完毕
      this.$nextTick(() => {
        let editableInputs = []
        if (type) {
          editableInputs = Array.from(this.$el.querySelectorAll('input'))
        } else {
          editableInputs = Array.from(this.$el.querySelectorAll('input')).filter(input => {
            return input.getAttribute('disabled') !== 'disabled'
          })
        }
        editableInputs.forEach((input, index, array) => {
          const popper = input.parentNode.className.includes('popover')
          const readonly = input.getAttribute('readonly') === 'readonly'
          const nextCell = input.getAttribute('next-cell') === 'false'
          if (popper || readonly || nextCell) return
          input.addEventListener('keydown', event => {
            if (event.key === 'Enter') {
              event.stopPropagation()
              const nextIndex = index === array.length - 1 ? 0 : index + 1
              const targetInput = array[nextIndex]
              targetInput.focus()
              targetInput.select()
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-weight: 700!important; /* 在此处添加你要修改的样式 */
  color: #333!important;
}
</style>
